//@author yangbin
import 'package:flutter/material.dart';
// import 'package:flutter_picker/flutter_picker.dart';
import '../../utils/base.dart';
import '../../widgets/xpage.dart';
import '../../widgets/tabs.dart';
import '../../widgets/picker.dart';

import 'device_item.dart';
import '../../beans/device_bean.dart';

class DeviceManagerList extends StatelessWidget {
  const DeviceManagerList({Key key}) : super(key: key);

  Widget _filters() {
    List<XPickerItemBean> statusFilters = [
      XPickerItemBean(0, '全部设备状态'),
      XPickerItemBean(1, '在线设备'),
      XPickerItemBean(2, '离线设备'),
    ];

    List<XPickerItemBean> typeFilters = [
      XPickerItemBean(0, '全部设备类型'),
      XPickerItemBean(1, '娃娃机'),
      XPickerItemBean(2, '出币器'),
      XPickerItemBean(3, '下分器'),
    ];

    List<XPickerItemBean> shopFilters = [
      XPickerItemBean(0, '全部门店'),
      XPickerItemBean(1, '天安店'),
      XPickerItemBean(2, '番禺店'),
      XPickerItemBean(3, '上海分店'),
    ];

    Widget _searchInput() {
      return Container(
        margin: EdgeInsets.symmetric(horizontal: Design.px(13)),
        width: Design.px(420),
        height: Design.px(75),
        decoration: BoxDecoration(
          border: Border.all(
            width: Design.px(2),
            color: HexColor('d5d5d5'),
          ),
          borderRadius: BorderRadius.circular(Design.px(3)),
        ),
        child: Row(
          children: <Widget>[
            Expanded(
              child: TextField(
                controller: TextEditingController(),
                decoration: InputDecoration(
                  hintText: '请输入设备号',
                  hintStyle: TextStyle(
                    color: HexColor('999999'),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                    borderSide: BorderSide.none,
                  ),
                ),
                style: TextStyle(
                  fontSize: Design.px(32),
                  color: HexColor('333333'),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: Design.px(15)),
              child: Image.asset('assets/icon-search-1.png'),
            )
          ],
        ),
      );
    }

    return Container(
      padding: EdgeInsets.symmetric(vertical: Design.px(50)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          XPicker(
            value: statusFilters[0],
            items: statusFilters,
            onChanged: (v) => {},
          ),
          XPicker(
            value: typeFilters[0],
            items: typeFilters,
            onChanged: (v) => {},
          ),
          XPicker(
            value: shopFilters[0],
            items: shopFilters,
            onChanged: (v) => {},
          ),
          _searchInput(),
        ],
      ),
    );
  }

  Widget _list() {
    List<DeviceBean> mockData = [
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST083',
          totalCoin: 123,
          totalPoint: 3241,
          shopName: '天安创新大厦',
          deviceTypeName: '娃娃机',
          status: 1),
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST084',
          totalCoin: 123,
          totalPoint: 3241,
          shopName: '天安创新大厦',
          deviceTypeName: '娃娃机',
          status: 1),
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST085',
          totalCoin: 123,
          totalPoint: 234,
          shopName: '天安创新大厦',
          deviceTypeName: '娃娃机',
          status: 2),
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST086',
          totalCoin: 13,
          totalPoint: 3241,
          shopName: '天安创新大厦',
          deviceTypeName: '出币器',
          status: 2),
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST087',
          totalCoin: 13,
          totalPoint: 123,
          shopName: '天安创新大厦',
          deviceTypeName: '娃娃机',
          status: 1),
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST088',
          totalCoin: 132,
          totalPoint: 123,
          shopName: '美国分店',
          deviceTypeName: '出币器',
          status: 2),
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST089',
          totalCoin: 13,
          totalPoint: 3241,
          shopName: '日本分店',
          deviceTypeName: '娃娃机',
          status: 2),
      DeviceBean(
          appId: 200,
          deviceSn: 'TEST090',
          totalCoin: 13,
          totalPoint: 3241,
          shopName: '日本分店',
          deviceTypeName: '娃娃机',
          status: 2),
    ];

    return ListView(
      scrollDirection: Axis.vertical,
      children: <Widget>[
        GridView.count(
          //ListView嵌套GridView会报错，加此参数后可修正错误： https://segmentfault.com/q/1010000018145105/
          shrinkWrap: true,
          //每行2个
          crossAxisCount: 2,
          //水平子Widget之间间距
          crossAxisSpacing: Design.px(20),
          //垂直子Widget之间间距
          mainAxisSpacing: Design.px(20),
          // 中间间隔空白比例  https://blog.csdn.net/hao_m582/article/details/84108041
          childAspectRatio: 1088 / 414,
          padding: EdgeInsets.all(Design.px(20)),
          children: mockData.map((t) => DeviceItem(t)).toList(),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: XPage(
        appbar: PageAppBar(
          '设备管理',
        ),
        body: Column(
          children: <Widget>[
            _filters(),
            Expanded(
              child: _list(),
            )
          ],
        ),
      ),
    );
  }
}
